<template>
	<view class="b_width hui">
		<view class="form_box" v-if="!info.id">

			<view class="xx_box">
				<view class="b_flex_c input_box i_b_b" @click="$project.toPath('/pages/new/plot')">
					<view class="b_flex_c left">
						<view class="">小区</view>
					</view>
					<input class="i_right" disabled v-model="plot" placeholder="选择小区信息" placeholder-style="color:#CECECE"></u--input>
					<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				</view>

				<view class="b_flex_c input_box i_b_b" @click="setFloor">
					<view class="b_flex_c left">
						<!-- 	<view class="b_red xing">*</view> -->
						<view class="">楼栋房屋</view>
					</view>
					<input class="i_right" disabled v-model="floor" placeholder="选择楼栋房屋" placeholder-style="color:#CECECE"></u--input>
					<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				</view>

                  <view class="b_flex_c input_box i_b_b" @click="setZhShow()">
                  	<view class="b_flex_c left">
                  		<!-- 	<view class="b_red xing">*</view> -->
                  		<view class="">访问住户</view>
                  	</view>
                  	<input class="i_right" disabled v-model="zh" placeholder="选择住户" placeholder-style="color:#CECECE"></u--input>
                  	<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
                  </view>


                 <view class="b_flex_c input_box i_b_b">
                 	<view class="b_flex_c left">
                 		<view class="">访客姓名</view>
                 	</view>
                 	<input v-model="form.name" class="i_right" placeholder="请输入访客姓名"
                 		placeholder-style="color:#CECECE"></u--input>
                 	<view class="l_icon"></view>
                 </view>
				 
				 <view class="b_flex_c input_box i_b_b">
				 	<view class="b_flex_c left">
				 		<view class="">访客性别</view>
				 	</view>
				 
				 
				 	<u-radio-group active-color="#E8A206" class="sex_box" v-model="form.sex">
				 		<u-radio class="radio" v-for="(item, index) in sexList" :key="index" :name="item.id">
				 			{{item.name}}
				 		</u-radio>
				 	</u-radio-group>
				 
				 	<view class="l_icon"></view>
				 </view>
				 

                 <view class="b_flex_c input_box i_b_b">
                 	<view class="b_flex_c left">
                 		<view class="">访客手机号</view>
                 	</view>
                 	<input v-model="form.mobile" class="i_right" placeholder="请输入访客手机号"
                 		placeholder-style="color:#C2C7CE"></u--input>
                 	<view class="l_icon"></view>
                 </view>
				 
				 <view class="b_flex_c input_box i_b_b">
				 	<view class="b_flex_c left">
				 		<view class="">访客身份证号</view>
				 	</view>
				 	<input v-model="form.card" class="i_right" placeholder="请输入访客身份证号"
				 		placeholder-style="color:#C2C7CE"></u--input>
				 	<view class="l_icon"></view>
				 </view>
				 
				 <view class="b_flex_c input_box i_b_b">
				 	<view class="b_flex_c left">
				 		<view class="">访客车牌号</view>
				 	</view>
				 	<input v-model="form.code" class="i_right" placeholder="请输入访客车牌号"
				 		placeholder-style="color:#C2C7CE"></u--input>
				 	<view class="l_icon"></view>
				 </view>


                  <view class="b_flex_c input_box i_b_b" @click="setStime()">
                  	<view class="b_flex_c left">
                  		<!-- 	<view class="b_red xing">*</view> -->
                  		<view class="">来访时间起</view>
                  	</view>
                  	<input class="i_right" disabled v-model="stime" placeholder="选择来访时间" placeholder-style="color:#CECECE"></u--input>
                  	<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
                  </view>
				  
				  <view class="b_flex_c input_box i_b_b" @click="setEtime()">
				  	<view class="b_flex_c left">
				  		<!-- 	<view class="b_red xing">*</view> -->
				  		<view class="">来访时间止</view>
				  	</view>
				  	<input class="i_right" disabled v-model="etime" placeholder="选择来访结束时间" placeholder-style="color:#CECECE"></u--input>
				  	<u-icon class="right_icon" name="arrow-right" color="#DDDDDD"></u-icon>
				  </view>

                  <view class="b_flex_c input_box i_b_b">
                  	<view class="b_flex_c left">
                  		<view class="">来访原因</view>
                  	</view>
                  	<input v-model="form.reason" class="i_right" placeholder="请输入来访原因"
                  		placeholder-style="color:#C2C7CE"></u--input>
                  	<view class="l_icon"></view>
                  </view>
				  
				  <view class="input_box">
				  	<view class="bz_box b_flex_c">
				  		<view>照片 <!-- <text class="msg">(200kb以内格式jpg,非必填)</text> --> </view>
				  	</view>
				  	<view class="upload_box">
				  		<imgUpload :maxCount="1" v-model="form.avatar"></imgUpload>
				  	</view>
				  </view>

			</view>
			 <view class="sumbit" @click="submit">提交信息</view> 
		</view>
		<view class="shen_box" v-else>
			<image :src="imgRemote+'/assets/img/company_pass.png'" mode="widthFix"></image>
			<view v-if="info.status==1">审核中~~</view>
			<view v-if="info.status==2">已通过</view>
			<view v-if="info.status==3" class="tc_box">
				<view>未通过
					<text v-if="info.remakes"> :{{info.remakes}}</text>
				</view>
				<view class="sumbit" @click="cx">重新提交</view>
			</view>
		</view>
		<u-select mode="single-column" value-name="user_id" label-name="nickname" v-model="zhShow" :list="zhList" @confirm="zhConfirm"></u-select>

         
		<uvdatetimepicker @confirm="stimeconfirm"  :minDate="mintime" 
			 ref="stimePicker" v-model="form.stime" mode="datetime"></uvdatetimepicker>

           <uvdatetimepicker @confirm="etimeconfirm"  :minDate="mintime"
           	 ref="etimePicker" v-model="form.etime" mode="datetime"></uvdatetimepicker>

	</view>
</template>

<script>
	import imgUpload from "@/components/imgUpload.vue";
	import uvdatetimepicker from "@/uni_modules/uv-datetime-picker/components/uv-datetime-picker/uv-datetime-picker.vue";
	const app = getApp().globalData;
	const {
		imgRemote,
	} = app;
	export default {
		components: {
			imgUpload,uvdatetimepicker
		},
		data() {
			return {
				mintime:Number(new Date()),
				imgRemote: imgRemote,
				form: {
					name: '',
					mobile: '',
					sex: '',
					code: '',
					plot_id: '',
					floor_id: '',
					layer_id: '',
					room_id: '',
					zh_id:'',
					card: '',
					avatar: '',
					stime:'',
					etime:'',
					reason:''
				},
				plot:'',
				floor:'',
				zhList: [],
				zh:'',
				zhShow:false,
				stime:'',
				etime:'',
				info: {
					id: ''
				},
				option: [],
				sexList: [{
					id: 1,
					name: '男'
				},
				{
					id: 2,
					name: '女'
				}],
				cardList: [{
					id: 1,
					name: '身份证'
				}, {
					id: 2,
					name: '护照'
				}, {
					id: 3,
					name: '其他'
				}],
				type: '',
				
			}
		},
		onLoad(data) {
	
			/* this.getAddress();
			this.getType();
			this.getInfo();
			this.getUserInfo(); */
			let _ = this;
			uni.$on('plot', function(e) {

				if (e.id != _.form.plot_id) {
					_.floor = '';
					_.form.floor_id = '';
					_.form.layer_id = '';
					_.form.room_id = '';
				}

				_.plot = e.name;
				_.form.plot_id = e.id;

				console.log(e);
			});

			uni.$on('floor', function(e) {

				_.floor = e.floor.name + e.layer.name + e.room.name;
				_.form.floor_id = e.floor.id;
				_.form.layer_id = e.layer.id;
				_.form.room_id = e.room.id;
				console.log(e);
			});

		},
		onShow() {

                let time=Number(new Date());
                  console.log(time);
				  this.mintime=time;
			//this.getPlot();

		},
		methods: {
			etimeconfirm(e) {
				console.log(e);
				let time= this.$project.changeTime(e.value, 3, 2);
				this.etime = time;
				this.form.etime=e.value;
			},
			stimeconfirm(e) {
				console.log(e);
				let time= this.$project.changeTime(e.value, 3, 2);
				this.stime = time;
				this.form.stime=e.value;
			},
			setStime() {
				this.$refs.stimePicker.open();
			},
			setEtime() {
				this.$refs.etimePicker.open();
			},
			setZhShow(){
				if(!this.form.room_id) return this.$Toast('请先选择楼栋房屋');
				
				this.$get(this.$api.zhList,{room_id:this.form.room_id},res=>{
					let data=res.data;
					if(data.code==1){
						this.zhList = data.data;
						this.zhShow=true;
					}
				});
				
			},
			setFloor() {
				if (!this.form.plot_id) return this.$Toast('请先选择小区');
				this.$project.toPath('/pages/new/floor?id=' + this.form.plot_id + '&name=' + this.plot);
			},
			setFloorShow() {
				if (!this.form.plot_id) return this.$Toast('请先选择小区');

				this.floorShow = true;
			},
			zhConfirm(e){
				console.log(e);
				this.zh = e[0].label;
				this.form.zh_id = e[0].value;
				this.zhShow = false;
			},
			cx() {
				let info = JSON.parse(JSON.stringify(this.info));
				console.log(info);
				let form = {
					nickname: info.nickname,
					mobile: info.mobile,
					groups_id: info.groups_id,
					sex: info.sex,
					code: info.code,
					id: info.id,
					plot_id: info.plot_id,
					floor_id: info.floor_id,
					layer_id: info.layer_id,
					room_id: info.layer_id,
					card_type:info.card_type,
					card:info.card,
					url:info.url
				}
				this.groups = info.groups.name;
				this.plot = info.plot.name;
				this.floor = info.floor.name + info.layer.name + info.room.name;
				this.receiving = info.province + info.city + info.area;
				this.info.id = '';
				setTimeout(() => {
					this.form = form;
				}, 100)
			},
			getUserInfo() {
				let token = uni.getStorageSync('userToken');
				if (!token) return;

				this.$get(this.$api.userInfo, {
					token: token
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.form.mobile = data.data.mobile;
					}
				});
			},
			getInfo() {
				if (this.type == 3) return;
				this.$get(this.$api.aduitInfo, {
					token: uni.getStorageInfoSync('userToken')
				}, res => {
					this.info = res.data.data;
					if (!res.data.data.mobile) {
						this.form.mobile = res.data.data.users.mobile;
					}

				});
			},
			submit() {
				this.$post(this.$api.fkRecordAdd, this.form, res => {
					if (res.data.code == 1) {

						if (this.type == 3) {
							uni.navigateBack({});
						} else {
							uni.switchTab({
								url: '/pages/tabar/user'
							});
						}

					} else {
						this.$Toast(res.data.msg);
					}

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-radio__label {
			margin-right: 0 !important;
		}

		.u-radio__icon-wrap {
			margin-left: 20rpx;
		}
	}

	.b_width {
		width: 100%;
	}

	.hui {
		background: #F4F4F4;
		min-height: 100vh;
	}

	.form_box {
		box-sizing: border-box;
		//padding: 30rpx 20rpx;
		padding:0 0 20rpx 0;
		font-size: 28rpx;
	}

	.xx_box {
		box-sizing: border-box;
		//padding: 30rpx 30rpx;
		background-color: #fff;
		//border-radius: 15rpx;
	//	margin-bottom: 30rpx;
	}

	.radio {
		display: inline-block;
	}

	.sex_box {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.xx_title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.i_right {
		text-align: right;
		margin-left: auto;
	}

	.l_icon {
		margin-left: 10rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.bz_box {

		box-sizing: border-box;
		padding: 0 0 25rpx 0;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.input_box {
		box-sizing: border-box;
		padding: 30rpx 30rpx;

	}

	.i_b_b {
		border-bottom: 1rpx solid #EFEFEF;
	}


	.upload_box {
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
	}

	.b_flex_c {
		display: flex;
		align-items: center;
	}

	.b_red {
		color: red;
	}

	.b_f_w {
		font-weight: bold;
	}

	.xing {
		width: 18rpx;
		box-sizing: border-box;
		padding: 10rpx 0 0 0;
	}

	.left {
		width: 26%;
	}

	.tc_box {
		width: 50%;
		text-align: center;
	}

	.sumbit {
		//margin-top: 60rpx;
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #e34b0f;
		color: #fff;
		border-radius: 45rpx;
		margin: 80rpx auto 0rpx auto;
	}

	.map_box {
		font-size: 30rpx;
	}

	.shen_box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}

	.right_icon {
		margin-left:10rpx;
	}
	.msg{
		font-size: 24rpx;
	}
</style>